<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.*"%>
<%@ page import="models.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>List All Student</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body {
	magin-top: 20px;
}

#groupButton {
	margin-top: 20px;
}

li {
	margin-left: 200px;
}
</style>
<script>
	$(function() {
		var select = $("option");
		if($("select").attr("value") == "First Name") {
			select.eq(0).attr("selected","selected");
		}
		if($("select").attr("value") == "Last Name") {
			select.eq(1).attr("selected","selected");
		}
		if($("select").attr("value") == "Address") {
			select.eq(2).attr("selected","selected");
		}
		if($("select").attr("value") == "Age") {
			select.eq(3).attr("selected","selected");
		}
		if($("select").attr("value") == "Dob") {
			select.eq(4).attr("selected","selected");
		}
		if($("select").attr("value") == "Note") {
			select.eq(5).attr("selected","selected");
		}
// 		if($("select").attr("value"), function(index, value) {
// 			if(value == "First Name") {
// 				alert("1");
// 			}
// 			if(value == "Last Name") {
// 				alert("2");
// 			}
// 		});
	});
</script>
</head>
<body>
	<!--  Header -->
	<div class="row">
		<div class="large-3 columns">
			<h1>
				<img src="resources/logo_fpt.jpg">
			</h1>
		</div>
		<div class="large-6 columns">
			<fieldset>
				<legend>All members</legend>
				<ul class="">
					<li>Hieptq01746</li>
					<li>Anhlvv</li>
					<li>Trangnt</li>
					<li>NgocNQ</li>
					<li>Anhnt</li>
				</ul>
			</fieldset>

		</div>
		<div class="large-3 columns" id="groupButton">
			<!-- 						<form action="list.action" method="post"> -->
			<a href="ServletController?identify=listView" class="button radius">List</a>
			<!-- 						</form> -->
			<!-- 			<form action="add.action" method="post"> -->
			<a href="ServletController?identify=addView" class="button radius">Add</a>
			<!-- 			</form> -->
			<!-- 			<form action="editupdate.action" method="post"> -->
			<a href="ServletController?identify=euView" class="button radius">Edit
				+ Update</a>
			<!-- 			</form> -->
		</div>
	</div>
	<!-- Search in header -->
	<form action="ServletController?identify=searchStudent" method="post">
		<div class="row">
			<fieldset>
				<legend>Search Student</legend>
				<div class="large-9 columns">
					<div class="row">
						<div class="large-2 columns">
							<label for="right-label" class="right inline">Search
								Input</label>
						</div>
						<div class="large-2 columns">
							<input type="text" name="searchInput" value="${searchInput}" />
						</div>
						<div class="large-2 columns">
							<label for="right-label" class="right inline">Search Type</label>
						</div>
						<div class="large-2 columns">
							<select id="customDropdown1" class="medium" name="searchType" value="${searchType}">
								<option value="First Name">First Name</option>
								<option value="Last Name" >Last Name</option>
								<option value="Address">Address</option>
								<option value="Age">Age</option>
								<option value="Dob">Dob</option>
								<option value="Note">Note</option>
							</select>
							<!-- <input type="radio" name="searchType" value="First Name"> First Name<br>
							<input type="radio" name="searchType" value="Last Name" checked>
							Last Name<br> 
							<input type="radio" name="searchType" value="Address">
							Address <br>
							<input type="radio" name="searchType" value="Age"> Age<br>
							<input type="radio" name="searchType" value="Dob" checked>
							Dob<br> 
							<input type="radio" name="searchType" value="Note">
							Note -->
						</div>
						<input type="submit" value="Search Student" class="small button"
							id="searchStudent" />
					</div>
				</div>
			</fieldset>
		</div>

	</form>
	<!-- Body content -->
	<%
	List<Student> listStudent = new ArrayList<Student>();
    listStudent = (ArrayList<Student>) request.getAttribute("listStudent");
	Student student = null;
	%>
	<div class="row">
		<div class="large-12 columns" align="justify" dir="rtl">

			<fieldset>
				<legend>List All Students</legend>

				<div class="row">
					<div class="large-12 columns">
						<table>
							<thead>
								<tr>
									<th width="100">ID</th>
									<th width="200">First Name</th>
									<th width="200">Last Name</th>
									<th width="300">Address</th>
									<th width="50">Age</th>
									<th width="200">Date Of Birth</th>
									<th width="300">Note</th>
								</tr>
							</thead>
							<tbody>
								<%  for (int i = 0; i < listStudent.size(); i++) { 
					  		student = listStudent.get(i);
					  	%>
								<tr>
									<td><%= student.getId() %></td>
									<td><%= student.getFirstName() %></td>
									<td><%= student.getLastName() %></td>
									<td><%= student.getAddress() %></td>
									<td><%= student.getAge() %></td>
									<td><%= student.getDob() %></td>
									<td><%= student.getNote() %></td>
								</tr>
								<%  } %>
							</tbody>
						</table>
					</div>
				</div>

			</fieldset>
			<hr>
		</div>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>')
	</script>
	<script src="js/foundation.js"></script>
	<script src="js/foundation.alerts.js"></script>
	<script src="js/foundation.clearing.js"></script>
	<script src="js/foundation.cookie.js"></script>
	<script src="js/foundation.dropdown.js"></script>
	<script src="js/foundation.forms.js"></script>
	<script src="js/foundation.joyride.js"></script>
	<script src="js/foundation.magellan.js"></script>
	<script src="js/foundation.orbit.js"></script>
	<script src="js/foundation.placeholder.js"></script>
	<script src="js/foundation.reveal.js"></script>
	<script src="js/foundation.section.js"></script>
	<script src="js/foundation.tooltips.js"></script>
	<script src="js/foundation.topbar.js"></script>
	<script src="js/foundation.interchange.js"></script>
	<script>
		$(document).foundation();
	</script>
</body>
</html>